<template>
  <view class="content">
    <van-empty description="暂无充值活动快去创建吧" v-if="paylist.length === 0" />
    <view class="info">
      <view class="info_item" v-for="(item, index) in data.list" :key="index">
        <view class="text">
          <view class="word">活动类型：{{ hdsta(item.type) }}</view>
          <view class="word">活动方式：{{ hdsta(item.scope) }}</view>
          <view class="word" v-if="item.type === 'RATIO'">返利比例：1:{{ item.ratio }}</view>
          <view class="word" v-else>支付{{ item.payAmount }}元 送{{ item.points }}积分</view>
          <view class="time">开始时间：{{ item.startTime }}</view>
          <view class="time">结束时间：{{ item.endTime }}</view>
        </view>
        <view class="run">
          <view class="sta" @click="putsta(item.id, item.status)">{{ hdsta(item.status) }}</view>
          <view class="bian" @click="enit(item.id)">编辑</view>
          <view class="del" @click="delhuodong(item.id)">删除</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button @click="toadd">创建充值活动</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { err, toast, to } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
import {hdsta} from '@/utils/utils'
const data = reactive({
  page: 1,
  size: 10,
  list: [],
  pageTotal: 0
});
onLoad(() => {
  data.list=[]
  paylist();
});
async function paylist() {
  try {
    const { page, size } = data;
    const res = await api.payhdList({ page, size });
    if (res.respCode === 200) {
      const list = JSON.parse(res.source);
      data.pageTotal = res.pageTotal;
      data.list = data.list.length === 0 ? list : data.list.concat(list);
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
async function putsta(id: any, status: any) {
  try {
    const newStatus = status === 'DISABLED' ? 'NORMAL' : 'DISABLED';
    const datas = {
      id,
      status: newStatus
    };
    const res = await api.paystaput(datas);
    if (res.respCode === 200) {
      (data.page = 1), (data.list = []);
      paylist();
      toast('修改成功');
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function delhuodong(e: any) {
  try {
    uni.showModal({
      title: '提示',
      content: '确定删除此活动吗？',
      complete: async (res: any) => {
        if (res.confirm) {
          const res = await api.payhdDel({ id: e });
          if (res.respCode === 200) {
            (data.page = 1), (data.list = []);
            paylist();
            toast('删除成功');
          } else {
            toast(res.msg);
          }
        }
      }
    });
  } catch (error) {
    err(error);
    throw error;
  }
}
function enit(e: any) {
  to('/dj/addpayhd/addpayhd?id=' + e);
}
function toadd() {
  to('/dj/addpayhd/addpayhd');
}
onReachBottom(() => {
  const { list, pageTotal, page } = data;
  if (list.length < pageTotal) {
    data.page = page + 1;
    paylist();
  } else {
    toast('已加载全部数据');
  }
});
</script>

<style scoped>
Page {
  background: #fff;
}
.info {
  width: 100%;
}
.info_item {
  width: 716rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  opacity: 1;
  border: 2rpx solid #e5e7eb;
  margin: 0 auto;
  margin-top: 16rpx;
  padding-left: 16rpx;
  box-sizing: border-box;
  overflow: hidden;
}
.text {
  float: left;
}
.run {
  float: right;
  overflow: hidden;
  padding-top: 40rpx;
}

.word {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: bold;
  color: #000000;
  margin-top: 16rpx;
}
.time {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  margin-top: 8rpx;
}
.bian {
  float: left;
  width: 64rpx;
  height: 40rpx;
  background: #e30514;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
  margin-right: 16rpx;
}
.del {
  float: right;
  width: 64rpx;
  height: 40rpx;
  background: #fff;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #e30514;
  text-align: center;
  line-height: 40rpx;
  margin-right: 28rpx;
  border: 1rpx solid #e30514;
  box-sizing: border-box;
}
.footer {
  width: 100%;
  height: 68rpx;
  position: fixed;
  bottom: 20rpx;
}
button {
  width: 716rpx;
  height: 68rpx;
  background: #e30514;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  opacity: 1;
  color: #fff;
  padding: 0;
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.sta {
  float: left;
  width: 90rpx;
  height: 40rpx;
  background: #e30514;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
  margin-right: 10rpx;
}
</style>
